Vue.component('app-console', {
	template: `
		<el-drawer direction="rtl" size="100%"
				:show-close="false" :visible.sync="showDrawer" @contextmenu.prevent.stop="forbidden($event)">
			<el-tabs v-model="activePane" tab-position="left"> 
				<el-tab-pane label="data" name="tab-data">
					<tab-data></tab-data>
				</el-tab-pane>
				<el-tab-pane label="plan" name="tab-plan">
					<tab-data></tab-data>
				</el-tab-pane>
				<el-tab-pane label="debug" name="tab-debug">
					<tab-debug></tab-debug>
				</el-tab-pane>
			</el-tabs>
		</el-drawer>
	`,
	data: function(){
		return {
			showDrawer: true,
			activePane: 'tab-data',
		};
	
	},
	
	computed: {

	},

	methods: {
		forbidden: function(event){
			console.log(event);
			let self = this;
			self.$bus.$emit('context-menu-request', {from: 'console', event: event});
			
		}

	},
	
	created: function(){
		console.log('console created....');
		let self = this;
		self.$bus.$on('show-console', function(evtMsg){
			self.showDrawer = true;

		});

	}

});